<template>
  <div class="page-account-home">
    <div class="bar">
      <div class="title">{{ lang.t('title') }}</div>
    </div>
    <t-row :gutter="20">
      <t-col :span="4">
        <div class="bg-box">
          <div class="total">
            <t-statistic 
              color="blue"
              :title="lang.t('order_total')" 
              :value="Number(data.order?.total ?? 0)"
              :format="app.money.format" 
              :animation="{
                valueFrom: 0,
                duration: 1000,
              }"
              animation-start
            />
            <t-tag variant="light" shape="round">{{ time.dateSmall() }}</t-tag>
          </div>
          
          <t-statistic 
            :title="lang.t('order_count')" 
            :value="data.order?.count ?? 0"
            :animation="{
              valueFrom: 0,
              duration: 1000,
            }"
            animation-start
            style="margin-top: 30px"
          />
        </div>
      </t-col>
      <t-col :span="4">
        <div class="bg-box">
          <div class="total">
            <t-statistic 
              :title="lang.t('client_count')" 
              :value="data.client?.count ?? 0"
              :animation="{
                valueFrom: 0,
                duration: 1000,
              }"
              animation-start
            />
          </div>
          <div class="total">
            <t-statistic 
              :title="lang.t('supplier_count')" 
              :value="data.supplier?.count ?? 0"
              :animation="{
                valueFrom: 0,
                duration: 1000,
              }"
              animation-start
              style="margin-top: 30px"
            />
          </div>
        </div>
      </t-col>
      <t-col :span="4">
        <div class="bg-box">
          <div class="total">
            <t-statistic 
              :title="lang.t('goods_count')" 
              :value="data.goods?.count ?? 0"
              :animation="{
                valueFrom: 0,
                duration: 1000,
              }"
              animation-start
            />
            <t-statistic 
              color="red"
              :title="lang.t('goods_count_min')" 
              :value="data.goods?.count_min ?? 0"
              :animation="{
                valueFrom: 0,
                duration: 1000,
              }"
              animation-start
              style="width: 50%"
            />
          </div>
          <div class="total">
            <t-statistic 
              :title="lang.t('goods_total')" 
              :value="Number(data.goods?.total ?? 0)"
              :format="app.money.format" 
              :animation="{
                valueFrom: 0,
                duration: 1000,
              }"
              animation-start
              style="margin-top: 30px"
            />
          </div>
        </div>
      </t-col>
    </t-row>
  </div>
</template>

<script setup>
  import { ref, reactive } from 'vue'
  import app from '@/app'
  import { total } from '@/api/store/order'
  import { total as totalGoods } from '@/api/store/goods'
  import { total as totalClient } from '@/api/erp/client'
  import { total as totalSupplier } from '@/api/erp/supplier'

  const lang = app.lang.space('page.account.home')
  const time = ref(app.time.now())
  const data = reactive({
    order: {},
    goods: {},
    client: {},
    supplier: {}
  })

  // 请求统计
  const getData = () => {
    getOrder()
    getGoods()
    getClient()
    getSupplier()
  }

  const getOrder = async () => {
    // 时间区间
    data.order = await total({ 
      time: [
        time.value.dayStart().unix(), 
        time.value.dayEnd().unix()
      ] 
    })
  }

  const getGoods = async () => {
    data.goods = await totalGoods()
  }

  const getClient = async () => {
    data.client = await totalClient()
  }

  const getSupplier = async () => {
    data.supplier = await totalSupplier()
  }

  getData()
</script>

<style lang="scss">
  @import '@/style/global';

  .page-account-home{
    .total{
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
</style>